<template>
  <div class="user-table">
    <!-- 搜索框区域 -->
    <div class="search-container">
      <el-input v-model="searchUserId" placeholder="请输入用户ID" @keyup.enter="filterData"></el-input>
      <el-input v-model="searchRoomId" placeholder="请输入房间ID" @keyup.enter="filterData"></el-input>
      <el-input v-model="searchCreateTime" placeholder="请输入下单时间" @keyup.enter="filterData"></el-input>
      <el-input v-model="searchInTime" placeholder="请输入入住时间" @keyup.enter="filterData"></el-input>
      <el-input v-model="searchLeaveTime" placeholder="请输入离店时间" @keyup.enter="filterData"></el-input>
      <el-input v-model="searchRealPeople" placeholder="请输入入住人数" @keyup.enter="filterData"></el-input>
      <el-select v-model="searchFapiao" placeholder="请选择是否需要发票" @change="filterData">
        <el-option label="需要" value="1"></el-option>
        <el-option label="不需要" value="0"></el-option>
      </el-select>
      <el-select v-model="searchFlag" placeholder="请选择受理状态" @change="filterData">
        <el-option label="未处理" value="0"></el-option>
        <el-option label="办理入住" value="1"></el-option>
        <el-option label="退订" value="2"></el-option>
        <el-option label="订单完成" value="3"></el-option>
      </el-select>
      <el-button size="mini" @click="filterData">搜索</el-button>
    </div>
    <!-- 表格 -->
    <el-table :data="paginatedData" stripe style="width: 100%">
      <el-table-column prop="id" label="id"></el-table-column>
      <el-table-column prop="userId" label="用户id"></el-table-column>
      <el-table-column prop="roomId" label="房间id"></el-table-column>
      <el-table-column prop="createTime" label="下单时间"></el-table-column>
      <el-table-column prop="inTime" label="入住时间"></el-table-column>
      <el-table-column prop="leaveTime" label="离店时间"></el-table-column>
      <el-table-column prop="realPrice" label="总计价格"></el-table-column>
      <el-table-column prop="realPeople" label="入住人数"></el-table-column>
      <el-table-column label="发票">
        <template slot-scope="scope">
          <span v-if="scope.row.fapiao === 1">需要</span>
          <span v-if="scope.row.fapiao === 0">不需要</span>
        </template>
      </el-table-column>
      <el-table-column prop="flag" label="受理状态"></el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="filteredData.length"
    ></el-pagination>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [],
        searchUserId: '',
        searchRoomId: '',
        searchCreateTime: '',
        searchInTime: '',
        searchLeaveTime: '',
        searchRealPeople: '',
        searchFapiao: '',
        searchFlag: '',
        filteredData: [],
        currentPage: 1,
        pageSize: 10
      };
    },
    computed: {
      paginatedData() {
        const start = (this.currentPage - 1) * this.pageSize;
        const end = start + this.pageSize;
        return this.filteredData.slice(start, end);
      }
    },
    methods: {
      listOrders() {
        this.axios
          .get("http://localhost:9151/admin/listOrders?orderFlags=1,2,3")
          .then((res) => {
            this.tableData = res.data.data;
            for (let i = 0; i < this.tableData.length; ++i) {
              switch (this.tableData[i].flag) {
                case 0:
                  this.tableData[i].flag = "未处理";
                  break;
                case 1:
                  this.tableData[i].flag = "办理入住";
                  break;
                case 2:
                  this.tableData[i].flag = "退订";
                  break;
                case 3:
                  this.tableData[i].flag = "订单完成";
                  break;
              }
            }
            this.filterData();
          })
          .catch((res) => {
            console.log("err: " + res);
          });
      },
      filterData() {
        this.filteredData = this.tableData.filter(item => {
          const userIdMatch = this.searchUserId === '' || item.userId.includes(this.searchUserId);
          const roomIdMatch = this.searchRoomId === '' || item.roomId.includes(this.searchRoomId);
          const createTimeMatch = this.searchCreateTime === '' || item.createTime.includes(this.searchCreateTime);
          const inTimeMatch = this.searchInTime === '' || item.inTime.includes(this.searchInTime);
          const leaveTimeMatch = this.searchLeaveTime === '' || item.leaveTime.includes(this.searchLeaveTime);
          const realPeopleMatch = this.searchRealPeople === '' || item.realPeople.toString().includes(this.searchRealPeople);
          const fapiaoMatch = this.searchFapiao === '' || item.fapiao.toString() === this.searchFapiao;
          const flagMatch = this.searchFlag === '' || (typeof item.flag === 'string' ? item.flag.includes(this.getFlagLabel(this.searchFlag)) : item.flag.toString() === this.searchFlag);
          return userIdMatch && roomIdMatch && createTimeMatch && inTimeMatch && leaveTimeMatch && realPeopleMatch && fapiaoMatch && flagMatch;
        });
        this.currentPage = 1;
      },
      getFlagLabel(flagValue) {
        switch (flagValue) {
          case '0':
            return '未处理';
          case '1':
            return '办理入住';
          case '2':
            return '退订';
          case '3':
            return '订单完成';
          default:
            return '';
        }
      },
      handleSizeChange(newSize) {
        this.pageSize = newSize;
      },
      handleCurrentChange(newPage) {
        this.currentPage = newPage;
      }
    },
    mounted() {
      this.listOrders();
    }
  };
</script>

<style scoped>
  .user-table {
    margin: 2rem;
  }

  .search-container {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
  }

  .el-input,
  .el-select,
  .el-button {
    min-width: 120px;
  }
</style>
